<template>
  <div class="iframe">
    <!-- <iframe src="https://vue-js.com/learn-vue/start/"></iframe> -->
    <el-result
      icon="success"
      title="即将跳转外网"
    >
      <template #sub-title>
        <el-alert
          v-if="showAlert"
          title="Error 太累了~ ! 不跳"
          type="error"
          description="不想跳外网了，手动跳转吧"
          show-icon
        />
        <div v-else>{{ `${!!~time ? time + 'S' : '倒计时结束'}` }}</div>
      </template>
      <template #extra>
        <el-link href="https://vue-js.com/learn-vue/start/" type="success" target="_blank" @click="clearTimer">立刻跳转 https://vue-js.com/learn-vue/start/</el-link>
      </template>
    </el-result>
  </div>
</template>
<script setup lang="ts">
import { ref, onUnmounted, onMounted } from 'vue'
const time = ref(10)
const showAlert = ref(false)
let timer:any = null
onMounted(() => {
  timer = setInterval(() => {
    if(time.value === 0) {
      clearInterval(timer)
      showAlert.value = true
      // window.open('https://vue-js.com/learn-vue/start/')
    } else {
      time.value--
    }
  }, 1000)
})
const clearTimer = () => {
  clearInterval(timer)
}
onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style lang="scss" scoped>
.iframe {
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  height: 100%;
  overflow: clip;
}
iframe {
  border: 0;
  width: 100%;
  height: 100%;
}
</style>